<template>
  <div class="list" v-loading="loading">
    <div class="box">
      <div class="conditions clear">
        <el-form :inline="true" ref="searchForm" class="clear">
          <el-form-item>
            <!-- <el-cascader
              :props="regionProps"
              placeholder="区域"
              v-model="condition.region"
              :options="regionList
            ></el-cascader> -->
            <el-input placeholder="请输入关键字（选定后搜索）" ref="search" v-model="condition.keyword" class="search-keyword">
              <el-button slot="append" type="primary" @click="addressGeo">
                搜 索
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 80px;">
                POI搜索
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 80px;">
                标签搜索
            </el-button>

          </el-form-item>
          <el-form-item class="right">
            <el-button @click="resetForm('searchForm')" style="width: 86px"
              >重 置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <a-map
        :city="city"
        :center="center"
        :markers="markers"
        @change="handleMapChange"
        ref="map"/>
      <div class="analysis">
        <div class="analysis-first">
          <div class="shoucang">
            <el-button type="primary" @click="collectSearch" style="width: 100%"
            >收藏搜索</el-button
            >
          </div>
          <div class="duqushoucang">
            <el-button type="primary" @click="collectList" style="width: 100%"
            >收藏读取</el-button
            >
          </div>
          <collect ref="collect" @handleSelect="handleSelect"></collect>
        </div>
    <div class="analysis-second">
        <div class="top-line">
          <p class="icon">
            <ali-icon icon="iconshujufenxi" color="#0076FE" :size="18" />
          </p>
          <p class="title">实时统计</p>
          <p class="small-title">统计结果包含标签、文本、POI的多重过滤。</p>
        </div>
        <div class="foot-line">
          <div>
            <div class="type">企业统计数</div>
            <div class="bottom">
              <div class="count" v-text="total"></div>
              <div class="unit">家</div>
              <div class="circle orange">
                <ali-icon color="#fff" icon="iconqiye-tianchong" :size="24" />
              </div>
            </div>
          </div>
          <div style="margin-left: 23px">
            <div class="type">企业类型</div>
            <div class="bottom">
              <div class="count" v-text="company_num"></div>
              <div class="unit">个</div>
              <div class="circle green">
                <ali-icon
                  color="#fff"
                  icon="iconcaigouleixingzhanbi"
                  :size="24"
                />
              </div>
            </div>
          </div>
        </div>
    </div>
        <div class="btn-grp analysis-third" style="width: 203px"  v-if="jisuan">
          <div>
            <el-button type="success" style="width: 100%;margin-bottom: 10px" >
              <ali-icon icon="iconwancheng"  ></ali-icon>
                计算完成
            </el-button>
          </div>
          <div>
            <el-button type="primary" style="width: 100%;margin-bottom: 10px" @click="goDetail"
            >查看明细</el-button
            >
          </div>
          <div>
            <el-button style="width: 100%" type="primary" @click="goAnalysis"
            >多维度分析</el-button
            >
          </div>

        </div>
        <div class="btn-grp analysis-third" style="width: 203px"  v-if="!jisuan">

          <el-button type="primary" style="width: 100%;margin-bottom: 10px" @click="searchgeo" >
            计算
          </el-button>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Api from "@/api/companyMap";
import AMap from "./components/baidumap";
import collect from "./components/collect";
import { Message, MessageBox } from "element-ui";
import { fetchIndustry, fetchRegion, fetchMapList } from "@/api/index";
import Collect from './components/collect.vue';
export default {
  data() {
    return {
      condition: {
        region: {},
        lat: "",
        lng: "",
        radius: "",
        keyword: ""
      },

      regionProps: {
        label: "cityname",
        value: "cityname",
        children: "children",
      },
      keyword:'',
      jisuan:false,
      regionList: [],
      loading: false,
      hello: "企业地图",
      TMap: null,
      map: null,
      that: null,
      markers: [],
      company_num: 0,
      total: 0,
      val: [],
      city: "",
      center: [113.33876604768, 22.94642311893], //[113.33876604768,22.94642311893]
    };
  },
  watch: {
    "condition.region"(val) {
      console.log("wathch", val);
      let len = val.length;
      console.log(this.regionList);
      this.val = val;
      let provinceIndex = this.regionList.findIndex((item) => {
        return item.cityname == val[0];
      });
      console.log("index", provinceIndex);
      let cityIndex = this.regionList[provinceIndex].children.findIndex(
        (item) => {
          return item.cityname == val[1];
        }
      );
      console.log("cityindex", cityIndex);
      let areaIndex = this.regionList[provinceIndex].children[
        cityIndex
      ].children.findIndex((item) => {
        return item.cityname == val[2];
      });
      console.log("area", areaIndex);
      let area = this.regionList[provinceIndex].children[cityIndex].children[
        areaIndex
      ];
      (this.center = [area.longitude, area.latitude]),
        (this.city = val[len - 1]);
    },
  },
  components: { AMap,collect },
  created() {
    this.fetchRegion();
    //  this.search();

  },
  mounted() {
    this.$refs.map.initAutocomplete(this.$refs.search)
  },
  methods: {
    addressGeo(){
      this.$refs.map.setAddress()
      this.jisuan=false
    },
    /**
     * 读取收藏绘制圆
     */
    handleSelect(value){
      console.log(value)
      this.$refs.map.addOverlay(value.data)
    },
    searchgeo() {
      let map = this.$refs.map.search();
      console.log(map)
      if (map.circle.length == 0&&map.polygon.length==0) {
        Message.error("请选择范围");
        return;
      }
      this.loading = true;
      Api.fetchMap1Companies(
        {
          lat: this.condition.lat,
          lng: this.condition.lng,
          city: this.city,
          map: map,
          radius: this.condition.radius,
          pagesize: 2000,
        },
        (res) => {
          this.loading = false;
          if (res.code == 200) {
            this.total = res.data.total;
            this.company_num = res.company_num;
            console.log("data", res.data.data);
            this.jisuan=true
            this.$refs.map.setMark(res.data.data);
          }
        },
        (err) => {
          this.loading = false;
        }
      );
    },
    collectSearch() {
      let map = this.$refs.map.search();
      console.log(map.circle);
        if (map.circle.length == 0&&map.polygon.length==0) {
        Message.error("请选择范围");
        return;
      }
      MessageBox.prompt("名称", "收藏搜索", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPlaceholder: "请输入名称",
        inputValidator: this.inputValidator,
        inputErrorMessage: "请输入名称",
        showCancelButton: false,
        // center:true
      }).then(({ value }) => {
        Api.fetchMapCollection({ map: map, name: value }, (success) => {
          Message.success("收藏成功");
        });
      });
      /*  */
    },

    inputValidator(value) {
      console.log(value);
      if (value == null) {
        return false;
      }
      return true;
    },
    collectList() {
      this.$refs.collect.open()
    },
    geo() {
      let val = this.val;
      console.log(this.regionList);
      this.val = val;
      let provinceIndex = this.regionList.findIndex((item) => {
        return item.cityname == val[0];
      });
      console.log("index", provinceIndex);
      let cityIndex = this.regionList[provinceIndex].children.findIndex(
        (item) => {
          return item.cityname == val[1];
        }
      );
      console.log("cityindex", cityIndex);
      let areaIndex = this.regionList[provinceIndex].children[
        cityIndex
      ].children.findIndex((item) => {
        return item.cityname == val[2];
      });
      console.log("area", areaIndex);
      let area = this.regionList[provinceIndex].children[cityIndex].children[
        areaIndex
      ];
      this.center = [area.longitude, area.latitude];
    },
    search() {
      this.loading = true;
      Api.fetchMapCompanies(
        {
          lat: this.condition.lat,
          lng: this.condition.lng,
          city: this.city,
          radius: this.condition.radius,
        },
        (res) => {
          this.loading = false;
          if (res.code == 200) {
            this.total = res.meta.total;
            this.company_num = res.company_num;
            let markers = res.data.map((item) => {
              return {
                position: [item.longitude, item.latitude],
                label: item.company_name,
              };
            });
            this.markers = markers;
            if (this.markers) {
              this.center = this.markers[0].position;
            }
          }
        },
        (err) => {
          this.loading = false;
        }
      );
    },
    handleMapChange(val) {
      console.log(val);
      this.condition.lat = val.center.lat;
      this.condition.lng = val.center.lng;
      this.condition.radius = val.radius;
      console.log("condition", this.condition);
      this.search();
    },
    fetchRegion() {
      fetchRegion(
        (res) => {
          if (res.code == 200) {
            this.regionList = res.data;
          }
        },
        (err) => {}
      );
    },
    drawed() {
      this.loading = false;
    },
    resetForm(formName) {
      this.markers = [];
      this.company_num = 0;
      this.total = 0;
      this.$refs.map.clearMark();
    },
    goDetail() {
      let map = this.$refs.map.search();
      if (this.total) {
        let routeUrl= this.$router.resolve({
          name: "map/more/index",
          query: { map: JSON.stringify(map) },
        });
        window.open(routeUrl .href, '_blank');
      }
    },
    goAnalysis() {
      let map = this.$refs.map.search();
      if (this.total) {
       let routeUrl= this.$router.resolve({
          name: "map/analysis",
          query: { map: JSON.stringify(map) },
        });
        window.open(routeUrl .href, '_blank');
      }
    },
  },
};
</script>
<style lang="scss">
@import "@/styles/map/map/index.scss";
</style>

